<template>
  <div id="app">
    <login></login>
    <div id="router">
      <navs id="nav"></navs>
      <div id="view">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import login from '@/components/login.vue'
import navs from '@/components/nav.vue'

@Component({
  components: {
    login,
    navs,
  },
})
export default class App extends Vue {
  private mounted() {
    // const nav: any = document.getElementById('nav')
    const router: any = document.getElementById('router')
    // nav.style.height = (window.innerHeight - 61) + 'px'
    router.style.height = window.innerHeight - 61 + 'px'
  }
}
</script>

<style lang="stylus">
#router
  height 100%
  margin-left 200px
#nav
  float left
  width 200px
  height 100%
  margin-left -200px
#view
  height 100%
  box-sizing border-box
  margin-left 15px
  padding-top 15px
  overflow auto
  &::-webkit-scrollbar
    /* 滚动条整体样式 */
    /* 高宽分别对应横竖滚动条的尺寸 */
    width 3px
    height 0px
  &::-webkit-scrollbar-thumb
    /* 滚动条里面小方块 */
    border-radius 1px
    box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
    background #535353
  &::-webkit-scrollbar-track
    /* 滚动条里面轨道 */
    box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
    border-radius 1px
    background #ededed
</style>
